// 门诊医生工作站
<template>
  <el-row class="section-content">
    <el-col :span="24" class="section-option">
      <TopManu :TopArr="torArr" @handelDropdown="handelDropdown" @handelCall="getNextNumber" @handleDiagnosis="()=>{activityId = 5,handleGetServiceItem()}" @handelPrescription="handelPrescription"></TopManu>
    </el-col>
    <el-col :span="24">
        <el-col :span="7" class="section-Left">
          <el-tabs v-model="activeName">
            <el-tab-pane label="候诊患者" name="0">
              <el-col :span="24">
                <el-input placeholder="请输入内容" v-model="keyValue" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search">查询</el-button>
                </el-input>
              </el-col>
              <el-col :span="24" style="paddingTop:10px;">
                <FromList @handleCurrentChange="handleCurrentChange" :tableData="tableData" :tableTitle="tableTitle"  />
              </el-col>
            </el-tab-pane>
            <el-tab-pane label="已诊患者" name="1">
                <el-col :span="24">
                  <el-input placeholder="请输入内容" v-model="keyValue" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search">查询</el-button>
                  </el-input>
                </el-col>
                <el-col :span="24" style="paddingTop:10px;">
                  <FromList :tableData="tableData" :tableTitle="tableTitle"  />
                </el-col>
            </el-tab-pane>
            <el-tab-pane label="患者详情" name="2">
              <div class="outpatient">
                  <viewTitle text="基本信息"/>
                  <el-col :span="24">
                    <div class="outpatient-message">
                      <el-col :span='9'>
                        <div class="message-img"><img src="static/img/logo.d78cbfc6.png" alt=""></div>
                      </el-col>
                      <el-col :span='14' :offset="1">
                        <div class="message-text">
                          <div class="text-list">
                            <el-col :span='4'>姓名:</el-col>
                            <el-col :span='20'>{{from.name}}</el-col>
                          </div>
                          <div class="text-list">
                            <el-col :span='4'>性别</el-col>
                            <el-col :span='20'>{{from.gender}}</el-col>
                          </div>
                          <div class="text-list">
                            <el-col :span='4'>年龄</el-col>
                            <el-col :span='20'>{{from.age}}</el-col>
                          </div>
                          <div class="text-list">
                            <el-col :span='8'>出生日期:</el-col>
                            <el-col :span='16'>{{from.birthday}}</el-col>
                          </div>
                          <div class="text-list">
                            <el-col :span='4'>民族:</el-col>
                            <el-col :span='20'>汉</el-col>
                          </div>
                        </div>
                      </el-col>
                    </div>
                  </el-col>
                  <el-col :span="24" style="marginTop:20px;marginBottom:20px;">
                    <el-col :span="4">身份证号:</el-col>
                    <el-col :span="20">{{from.id_card}}</el-col>
                  </el-col>
                  <viewTitle text="就诊信息"/>
                  <el-col :span="23" style="marginTop:20px;">
                    <el-timeline >
                    <el-timeline-item
                      color="#02bf6b"
                      v-for="(activity, index) in activities"
                      :key="index"
                      >
                    <div>
                        <p>{{activity.timestamp}}</p>
                      <el-card>
                        <h4>缴纳挂号费</h4>
                        <p>状态: <span style="color:#02bf6b">已缴清</span>  </p>
                      </el-card>
                    </div>
                    </el-timeline-item>
                  </el-timeline>
                  </el-col>
              </div>
            </el-tab-pane>
          </el-tabs>
           
        </el-col>
        <el-col :span="17" style="padding:10px 20px 0 20px;" v-if="activityId == 1">
          <div class="wangEditor">
            <wangEditor v-model="detail" :isClear="isClear" @change="change"></wangEditor>
          </div>
        </el-col>
        <el-col :span="17" style="padding:10px 20px 0 20px;" v-if="activityId == 3">
          <el-col :span="24">
            <el-select :remote-method="searchHeadUser" v-model="addFrom.head_user" remote filterable placeholder="请选择">
              <el-option
                v-for="item in addList"
                :key="item.id"
                :label="item.real_name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
        </el-col>
        <el-col :span="17" style="padding:10px 20px 0 20px;" v-if="activityId == 5">
          <el-col :span="24">
             <el-form :inline="true" :model="diagnosisLine" class="demo-form-inline">
                <el-form-item label="搜索">
                  <el-input v-model="diagnosisLine.ServiceItemValue" placeholder="搜索"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="ServiceItemSearch">搜索</el-button>
                </el-form-item>
              </el-form>
          </el-col>
          <el-col :span="24">
               <FromList @handleCurrentChange="handleServiceItem" :tableData="ServiceItemData" :tableTitle="ServiceItemTitle"  />
          </el-col>
        </el-col>
    </el-col>
    <el-dialog
      title="正在叫号中"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <el-col :span="24" style="text-align:center;">
        <el-col :span='12'>{{from.number}}号</el-col>
        <el-col :span='12'>姓名:{{from.name}}</el-col>
        <el-col :span='24' style="margin:20px 0;">身份证号:{{from.id_card}}</el-col>
      </el-col>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handelArrived">已 到</el-button>
        <el-button type="primary" @click="handelButton">下 一 位</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="慢特病撤销原因"
      :visible.sync="dialogVisible1"
      width="30%"
      >
      <el-col :span="24" style="text-align:center;padding:0 0 20px 0">
         <el-input v-model="SlowRemake" placeholder="备注慢特病撤销原因" ></el-input>
      </el-col>
      <span slot="footer" class="dialog-footer" >
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="handleBackPsnSlowDisease">确 定</el-button>
      </span>
    </el-dialog>
  </el-row>
</template>

<script>
let that 
import FromList from "@/forComponents/fromList/fromList"
import wangEditor from "@/components/wangEditor/wangEditor"
import TopManu from "@/components/TopMenu"
import viewTitle from "@/forComponents/viewTitle"
import {getOutpatientList,getNextNumber,handelCall,handelDrugItem,handleUploadPsnSlowDisease,handleBackPsnSlowDisease,handleGetServiceItem,handleOutpatient} from "@/api/outpatient"
export default {
  name:'outpatient',
   data(){
     return {
      isClear: false,
      activityId:1,
      detail:"",
      activeName:"0",
      index:0,
      loading:0,
      dialogVisible:false,
      addList:[],
      ServiceItemPage:0,
      ServiceItemLimit:15,
      ServiceItemValue:"",
      addFrom:{
        head_user:"", 
      },
      torArr:[
       {
         type:1,
         name:"慢特病备案"
       },
       {
         type:2,
         name:"慢特病备案撤销"
       },
       {
         type:3,
         name:"门诊结算单据打印"
       }
      ],
      SlowRemake:"",
      dialogVisible1:false,
      from:{
       name:"",
       gender:1,
       age:0,
       birthday:"",
       id_card:"",
       user_id:"",
       doctor_id:"",
       number:"",
       register_id:"",
       patient_no:""
      },
      activities: [
        {
        content: '缴纳挂号费',
        timestamp: '状态:已经缴清',
        }
      ],
      keyValue:"",
      tableData:[
        
      ],
      ServiceItemTitle:[
        {
          prop:"name",
          name:"药品名",
          type:1,
         },
         {
          prop:"price",
          name:"价格",
          type:1,
         },
      ],
      ServiceItemData:[

      ],
      diagnosisLine:{
        ServiceItemValue:""
      },
      activeName:"0",
      tableTitle:[
         {
          prop:"number",
          name:"序号",
          type:1,
          width:80,
         },
         {
          prop:"patient_no",
          name:"门诊号",
          type:1,
          width:100,
         },
         {
          prop:"name",
          name:"姓名",
          type:1,
         },
         {
          prop:"id_card",
          name:"身份证号",
          type:1,
          width:170
         },
         {
          prop:"gender",
          name:"性别",
          type:1
         },
         {
          prop:"birthday",
          name:"出生日期",
          type:1,
          width:150
         },
         {
          prop:"age",
          name:"年龄",
          type:1
         },
          {
          prop:"patients",
          name:"患者类型",
          type:1
         },
          {
          prop:"id_card",
          name:"医疗卡号",
          type:1
         },
        {
          prop:"dept_name",
          name:"科室",
          type:1,
          width:120
         },
        {
          prop:"real_name",
          name:"大夫",
          type:1
         },
        {
          prop:"look_type",
          name:"挂号类型",
          type:1
         },
        {
          prop:"disease",
          name:"病种",
          type:1
         },
         {
          prop:"amount",
          name:"挂号金额",
          type:1
         },
         {
          prop:"start_time",
          name:"挂号时间",
          type:1,
          width:120 
         }
       ],
      page:0,
      size:15
     }
   },
   mounted(){
     that = this
     that.getList()
   }, 
    watch:{
    index(to){
      if(to == 0){
        that.loading.close();
      }else{
      that.loading = this.$loading({
          lock: true,
          text: '',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      }
    }
   },
   methods:{
    handleServiceItem(e){
      console.log(e)
    },
    handelDropdown(e){
      console.log(e)
      if(e == 1) that.handleUploadPsnSlowDisease()
      if(e == 2) that.dialogVisible1 = true
      if(e == 3) that.handleOutpatient()
    },
    handleOutpatient(){
     that.index++
     handleOutpatient({id:"2108130005"})
     .then(res=>{
       that.index--
       window.open(res.data)
        this.$message({
          message:"文件下载成功",
          type: 'success'
        });
     })
     .catch(e=>{
        that.index--
        this.$message({
          message:e.message,
          type: 'error'
        });
     })
    },
    handleUploadPsnSlowDisease(){
      that.index++
      handleUploadPsnSlowDisease({patient_no:"2108130005"})
      .then(res=>{
        that.index--
        this.$message({
          message:"慢特病备案成功",
          type: 'success'
        });
      })
      .catch(e=>{
        that.index--
         this.$message({
          message:e.message,
          type: 'error'
        });
      })
    },
    handleBackPsnSlowDisease(){
      that.index++
      handleBackPsnSlowDisease({psn_no:"61CS0006110001197503070032",remark:that.SlowRemake})
      .then(res=>{
        that.index--
        that.dialogVisible1 = false
        this.$message({
          message:"慢特病备案删除成功",
          type: 'success'
        });
      })
      .catch(e=>{
        that.index--
         this.$message({
          message:e.message,
          type: 'error'
        });
      })
    },
    searchHeadUser(e){
      that.index++
      getUserList({name:e,page:that.page,limit:that.limit})
      .then(res=>{
        if(res.data.list.length != 0){
          that.arrList = res.data.list
        }
        that.index--
      })
      .catch(e=>{
        that.index--
         this.$message({
          message:e.message,
          type: 'error'
        });
      })
    },
    handleGetServiceItem(){
      that.index++
      handleGetServiceItem({page:that.ServiceItemPage,limit:that.ServiceItemLimit})
      .then(res=>{
        that.index--
        res.data.list.forEach((item)=>{
          
        })
        that.ServiceItemData = that.ServiceItemData.concat(res.data.list)
      })
      .catch(e=>{
        that.index--
        that.$message({
          message:e.message,
          type: 'error'
        });
      })
    },
    handelPrescription(){
      that.actityId = 3
      that.handelDrugItem()
    },
    handelDrugItem(){
      that.index++
      handelDrugItem({keyword:""})
      .then(res=>{
        that.index--
        console.log(res)
      })
      .catch(e=>{
        that.index--
        that.$message({
          message:e.message,
          type: 'error'
        });
      })
    },
    handelArrived(){
      that.getCall({register_id:that.from.register_id,status:1})
    },
    getCall(data){
      that.index++
      handelCall({...data})
      .then(res=>{
         that.index--
         if(data.status == 2){
           that.getNextNumber()
         }else{
          that.$message({
            message:"成功到诊",
            type: 'success'
          });
          that.dialogVisible = false
         }
         
      })
      .catch(e=>{
        that.index--
        that.$message({
          message:e.message,
          type: 'error'
        });
      })
    },
    ServiceItemSearch(){
      
    },
    handelButton(){
      that.getCall({register_id:that.from.register_id,status:2})
    },
    getNextNumber(){
      that.index++
      getNextNumber({doctor_id:3})
      .then(res=>{
        that.index--
        that.activeName = "2"
        that.dialogVisible = true
        if(res.data){
          Object.keys(that.from).forEach(key=>{
              that.$set(that.from,key,res.data.member_info[key])
          })
          if(res.data.number){
          that.$set(that.from,"number",res.data.number)
          }
          if(res.data.id){
            that.$set(that.from,"register_id",res.data.id)
          }
        }
       
        
        
        
      })
      .catch(e=>{
         that.index--
         that.$message({
          message:e.message,
          type: 'error'
        });
      })
    },
    handleCurrentChange(e){
      this.$message({
          message:"患者选中成功",
          type: 'success'
      });
      Object.keys(that.from).forEach(key=>{
        that.$set(that.from,key,e[key])
      })
      that.activeName = "2"
    },
    getList(){
    that.index++
     getOutpatientList({page:that.page,size:that.size})
     .then(res=>{
       that.index--
       res.data.list.forEach((item,key)=>{
         Object.keys(item.member_info).forEach(key=>{
           if(key == "id"){
             item["user_id"] = item.member_info["id"]
           }else{
             item[key] = item.member_info[key]
           }
         })
         Object.keys(item.doctor_info).forEach(key=>{
           if(key == "id"){
             item["dept_id"] = item.doctor_info["id"]
           }else{
             item[key] = item.doctor_info[key]
           }
         })
         item.number = key + 1
         item.gender = item.gender == 1 ? '男' : item.gender == 2 ? '女' : '' 
       })
       that.tableData = res.data.list
     })
     .catch(e=>{
       that.index--
        this.$message({
          message:e.message,
          type: 'error'
        });
     })
    },
    change(val) {
      console.log(val)
    },
   },
   components:{
     FromList,
     wangEditor,
     TopManu,
     viewTitle
   }
}
</script>

<style lang='scss' scoped>
  .wangEditor{
    margin-top: 20px;
  }

  .section-content{
    height: calc(100% - 90px);
  }

  .section-Left{
    border-right: 1px solid rgb(2, 191, 107);
    height: calc(100vh - 90px);
    padding: 0 20px;
  }

  
.outpatient{
  padding-left: 10px;
  min-height: calc(100vh - 150px);
  .outpatient-message{
    margin-top: 20px;
    .message-img{
      height: 200px;
      object-fit: cover;
      border-radius: 10px;
      border:2px solid #e5e5e5;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .message-text{
      .text-list{
        font-size: 16px;
        box-sizing: border-box;
        padding-bottom: 40px;
      }
    }
  }
  .el-timeline{
    padding: 0;
  }
}

.dialog-footer{
  width: 100%;
  display: flex;
  justify-content: center;
}

</style>